<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      size="small"
      :pagination="false"
      :loading="loading"
      style="margin-top: 10px"
      rowKey="index"
      class="overflow-auto"
    >
      <span slot="service" slot-scope="row">
        <div v-for="(it, index) in row.service" :key="index">
          <u-text style="margin-right: 6px">{{ it.protocol }}</u-text>
          <span>{{ it.value }}</span>
        </div>
      </span>
      <span slot="web" slot-scope="row">
        <div v-for="(it, index) in row.web" :key="index">
          <u-text style="margin-right: 6px">{{ it.protocol }}</u-text>
          <span>{{ it.value }}</span>
        </div>
      </span>
      <span slot="action" slot-scope="row">
        <a-icon
          v-if="row.action == 2"
          type="check-circle"
          theme="twoTone"
          two-tone-color="#52c41a"
        />
      </span>
      <span slot="config">
        <span class="button-text" style="margin: 0">编辑</span>
        <span style="margin: 0 4px">|</span>
        <span class="button-text" style="margin: 0">复制</span>
        <span style="margin: 0 4px">|</span>
        <span class="button-text" style="margin: 0">删除 </span>
      </span>
      <span slot="use">
        <a-checkbox />
      </span>
    </a-table>
    <Pagination
      :total="total"
      :defaultPage="page"
      :defaultCurrent="current"
      @sizeChange="
        (val) => {
          page = val;
          current = 1;
          search();
        }
      "
      @currentChange="currentChange"
    />
  </div>
</template>
<script>
const columns = [
  {
    title: "源对象",
    key: "src",
    dataIndex: "src",
  },
  {
    title: "目的对象",
    key: "dst",
    dataIndex: "dst",
  },

  {
    title: "域名对象",
    key: "domain",
    dataIndex: "domain",
  },
  {
    title: "服务对象",
    key: "service",
    scopedSlots: { customRender: "service" },
  },

  {
    title: "WEB对象",
    key: "web",
    scopedSlots: { customRender: "web" },
  },
  {
    title: "动作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
  {
    title: "选项",
    key: "options",
    dataIndex: "options",
  },
  {
    title: "配置",
    key: "config",
    width: 140,
    scopedSlots: { customRender: "config" },
  },
  {
    title: "使用",
    key: "use",
    width: 60,
    scopedSlots: { customRender: "use" },
  },
];
import Pagination from "@/components/Pagination.vue";
import { mockWeb } from "@/config/web/data/web";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      columns,
      loading: false,
      page: 10,
      current: 1,
      data: mockWeb,
      total: 1,
      model: {
        ip: "",
      },
    };
  },
  methods: {
    currentChange(val) {
      this.current = val;
      this.search();
    },
    add() {},
    search() {},
  },
};
</script>
